<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <meta name="keyword: content='群星,stellaris,科技树'">
    <title>群星科技树</title>
    <link rel="icon" type="image/x-icon" href="./favicon.ico">
    <link rel="icon" type="image/x-icon" href="../favicon.ico">

    <style>
      a {
        color: -webkit-link;
        cursor: pointer;
        text-decoration: underline;
      }
    </style>

    <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
    <link href="./assets/vendor/Treant.css" rel="stylesheet">
    <link href="./assets/vendor/tooltipster.bundle.min.css" rel="stylesheet">

    <script src="./assets/vendor/Treant.js"></script>
    <script src="./assets/vendor/raphael.min.js"></script>
    <script src="./assets/vendor/jquery.min.js"></script>
    <script src="./assets/vendor/jquery.touchy.min.js"></script>
    <script src="./assets/vendor/tooltipster.bundle.min.js"></script>
    <script src="./assets/vendor/lozad.min.js"></script>
    <script src="./assets/vendor/jsrender.min.js"></script>
    <script src="./assets/js/dynamic-drag.js"></script>
    <script id="node-template" type="text/x-jsrender">
      <div class="icon lozad" data-background-image="../assets/img/{{:key}}.png"></div>
      <p class="node-name" title="{{:name}}">{{:name}}</p>
      <p class="node-title">
      {{if tier < 1}}
        {{:category}}  - <span class="tier tier-0">初始</span>
      {{else}}
        {{:category}} - <span class="tier tier-{{:tier}}">T {{:tier}}</span>
      {{/if}}
      </p>
      <p class="node-desc">
      {{if tier > 0}}
      Cost: <span class="{{:area}}-research">{{:cost}}, 权重: {{:base_weight}}</span>
      {{/if}}
      </p>
      <p class="node-desc" style="color:yellow">
      {{if is_gestalt === true}}
        <img src="../assets/icons/yes.png"/><img src="../assets/icons/ethic_gestalt_consciousness.png" height="21" width="21"/>
      {{/if}}
      {{if is_gestalt === false}}
        <img src="../assets/icons/no.png"/><img src="../assets/icons/ethic_gestalt_consciousness.png" height="21" width="21"/>
      {{/if}}
      {{if is_machine_empire === true}}
        <img src="../assets/icons/yes.png"/><img src="../assets/icons/auth_machine_intelligence.png" height="21" width="21"/>
      {{/if}}
      {{if is_machine_empire === false}}
        <img src="../assets/icons/no.png"/><img src="../assets/icons/auth_machine_intelligence.png" height="21" width="21"/>
        {{if is_drive_assimilator === true}}
        <img src="../assets/icons/yes.png"/><img src="../assets/icons/civic_machine_assimilator.png" height="21" width="21"/>
        {{/if}}
        {{if is_rogue_servitor === true}}
        <img src="../assets/icons/yes.png"/><img src="../assets/icons/civic_machine_servitor.png" height="21" width="21"/>
        {{/if}}
      {{/if}}
      {{if is_hive_empire === true}}
        <img src="../assets/icons/yes.png"/><img src="../assets/icons/auth_hive_mind.png" height="21" width="21"/>
      {{/if}}
      {{if is_hive_empire === false}}
        <img src="../assets/icons/no.png"/><img src="../assets/icons/auth_hive_mind.png" height="21" width="21"/>
      {{/if}}
      {{if is_megacorp === true}}
        <img src="../assets/icons/yes.png"/><img src="../assets/icons/auth_corporate.png" height="21" width="21"/>
      {{/if}}
      {{if is_megacorp === false}}
        <img src="../assets/icons/no.png"/><img src="../assets/icons/auth_corporate" height="21" width="21"/>
      {{/if}}
      </p>
      <div class="node-status"></div>
      <div class="extra-data">
      <div class="tooltip-header">描述</div>
      <div class="tooltip-content" style="max-width:320px">{{:description}}</div>
      {{if weight_modifiers.length > 0}}
          <div class="tooltip-header">权重修正</div>
          <div class="tooltip-content"><pre>{{:weight_modifiers.join('<br/>')}}</pre></div>
      {{/if}}
      {{if potential.length > 0}}
          <div class="tooltip-header">需求</div>
          <div class="tooltip-content"><pre>{{:potential.join('<br/>')}}</pre></div>
      {{/if}}
      {{if prerequisites.length > 1}}
          <div class="tooltip-header">前置科技</div>
          <div class="tooltip-content prerequisites">
          {{for prerequisites}}
              <img class="left {{:}}" height="52" width="52" src="//:0" data-src="../assets/img/{{:}}.png"">
          {{/for}}
          <div class="left">
          {{for prerequisites_names}}
            <span class="node-status {{:key}}">{{:name}}</span><br/>
          {{/for}}
          </div>
          </div>
      {{/if}}
      {{if feature_unlocks.length > 0}}
          <div class="tooltip-header">研究效果</div>
          <div class="tooltip-content">{{:feature_unlocks.join('<br/>')}}</div>
      {{/if}}
      </div>
    </script>

    <script>
      addEventListener('popstate', event => window.location.reload());
      const load_page = (param, title) => {
        history.pushState({pageID: param}, param, `${param}/`);
        document.title = title || param;
        $('<link>').appendTo('head').attr({
            type: 'text/css', 
            rel: 'stylesheet',
            href: '../assets/css/tech-tree.css'
        });
        $('body').load('../assets/html/body.html', function() {
            $('<script>').appendTo('head').attr({ src: '../assets/js/header.js' });
            $('<script>').appendTo('head').attr({ src: '../assets/js/tech-tracking.js' });
            $('<script>').appendTo('head').attr({ src: '../assets/js/tech-tree.js' });
        });
      };
    </script>

    <script>
      $(document).ready(function(){
        if (window.location.search) {
          const page = window.routes.find(r => r.route === window.location.search.slice(1));
          if (page) {
            load_page(page.route, page.title);
          }
        }
      });
    </script>
    <script>
      window.routes = [
          { name: 'canis minor-3.7.4',   route: 'canis-minor-3.7.4',       title: 'Stellaris 3.7.4 (canis minor)', },
          { name: 'Stellaris 3.6.0', route: 'orin-3.6.0',  title: 'Stellaris 3.6.0 (orin)', },
          { name: 'verne-2.6.3', route: 'verne-2.6.3',  title: 'Stellaris 2.6.3 (verne)', },
          { name: 'Stellaris 2.3.3', route: 'Stellaris 2.3.3',  title: 'Stellaris 2.3.3 (vanilla)', },
      ];
      $(document).ready(function(){
        routes.forEach(page => {
          const ele = $(`<li><a>${page.name}</a></li>`);
          ele.on("click", function() { load_page(page.route,page.title) });
          $('#tech-pages').append(ele);
        });
      });
    </script>

</head>
    <body>
      <b>科技</b>
      <ul id="tech-pages">
      </ul>
      <br/>
      鼠标点击科技，会显示科技详情
      <br/>
      <b>职业</b>
      <ul>
        <li><a href="jobs/index.html">Stellaris 3.7.4 职业 (WIP)</a></li>
      </ul>
      <p>
      代码出处 <a href="https://github.com/turanar/stellaris-tech-tree" target="_blank">Turanar</a><br/>
      项目地址 <a href="https://github.com/hysro1997/hysro1997.github.io" target="_blank">自行下载即可，纯静态网站</a><br/>
      贡献者 : 傲娇NOOB<br/>
      </p>
      <br/>

    </body>
</html>